import React, { useState, useEffect } from 'react'

import { connect } from 'react-redux'

function Count(props) {
  console.log(props)
  return (
    <>
      <p>{props.count}</p>
      <button
        onClick={() => {
          props.dispatch({ type: 'add', num: 2 })
        }}
      >
        +
      </button>
    </>
  )
}

// connect函数,返回的是Count的父组件,这个父组件会监听redux数据的变化,如果数据变化,父组件会更新,从而导致Count更新

// 如果connect第一次调用什么都不传,则Count组件只能获取到dispatch方法
// 如果在connect第一次调用传入了第一个参数,则可以将redux中数据过滤后通过props传递给Count组件
function mapStateToProps(state) {
  // state 是redux中所有的数据
  console.log(state, 'mapStateToProps执行了')
  return {
    count: state.count,
  }
}
const WithCount = connect(mapStateToProps)(Count)

// function connect(Wc){
//   return class XXX extends React.Component{
//     render(){
//       <Wc></Wc>
//     }
//   }
// }

// function connect() {
//   return function (Wc) {
//     return class XXX extends React.Component {
//       render() {
//         ;<Wc></Wc>
//       }
//     }
//   }
// }

export default WithCount
